<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>21Cake</title>
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/css_pc_init.css">
</head>

<body>
    <header>
        <div class="header">
            <div class="header-nav">
                <h1 class="header-logo">
                    <a href="index.html">
                        <img src="../images/logo.png" alt="21cake logo" />
                    </a>
                </h1>
                <ul class="nav-box">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="cake.html" target="_self">蛋糕</a></li>
                    <li><a href="bread.html" target="_self">面包</a></li>
                    <li><a href="ice-cream.html" target="_self">冰淇淋</a></li>
                    <li><a href="coffee-tea.html" target="_self">咖啡下午茶</a></li>
                    <li><a target="_self">咖啡全国送</a></li>
                    <li><a target="_self">企业专区</a></li>
                </ul>
                <div class="right-city-user">
                    <a class="header-app app-download">APP下载</a>
                    <div class="current-city">上海<i></i></div>
                    <a class="header-message">消息</a>
                    <span class="not-login"><a href="login.html">登录</a>/<a href="register.html">注册</a></span>
                    <a class="header-user">
                        <img src="../images/user-img.png" alt="21cake user icon" />
                    </a>
                    <a href="cart.html" class="header-cart">
                        <i></i>
                    </a>
                    <ul class="current-city-list  header-select">
                        <li><a href="javascript:void(0);" class="city-id-1">上海</a></li>
                        <li><a href="javascript:void(0);" class="city-id-2">北京</a></li>
                        <li><a href="javascript:void(0);" class="city-id-3">天津</a></li>
                        <li><a href="javascript:void(0);" class="city-id-4">杭州</a></li>
                        <li><a href="javascript:void(0);" class="city-id-5">无锡</a></li>
                        <li><a href="javascript:void(0);" class="city-id-6">苏州</a></li>
                        <li><a href="javascript:void(0);" class="city-id-7">广州</a></li>
                        <li><a href="javascript:void(0);" class="city-id-8">深圳</a></li>
                    </ul>
                    <ul class="header-user-list  header-select">
                        <li><a target="_blank">我的订单</a></li>
                        <li><a target="_blank">我的优惠券</a></li>
                        <li><a target="_blank">我的纪念日</a></li>
                        <li><a class="logout" target="_self">退出登录</a></li>
                    </ul>
                    <ul class="message-list-header  header-select">
                        <li><a target="_blank">通知</a></li>
                        <li><a target="_blank">物流</a></li>
                    </ul>
                    <dl class="app-list  header-select">
                        <dt>
                            <img src="../images/footer-erweima.png" alt="下载APP" />
                        </dt>
                        <dd>下载享更多优惠</dd>
                    </dl>
                </div>
            </div>
        </div>
    </header>

    <div class="banner">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            </ol>

            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="../images/f855993acf0aed0b7a9190aa43b16eaf.jpg" alt="">
                </div>
                <div class="item">
                    <img src="../images/69e78ae7416447fe50d516fe6a69adcc.jpg" alt="...">
                </div>
                <div class="item">
                    <img src="../images/c55d2d64d121b6fd13c3a30d486e0236.jpg" alt="...">
                </div>
                <div class="item">
                    <img src="../images/94fc55f007fe7d6ed03f0dbb14bd5d40.jpg" alt="...">
                </div>
            </div>
        </div>
    </div>

    <!-- 中间内容 -->
    <div class="content-box">
        <div class="home-module home-menu">
            <a href="#1" name="menu_1">
                <img src="../images/d349da941efba219856d5983958bdd81.jpg" alt="新品" title="新品" />
            </a>
            <a href="#2" name="menu_2">
                <img src="../images/b6f731149b7076b524114c0d7c387da0.png" alt="生日" title="生日" />
            </a>
            <a href="#4" name="menu_3">
                <img src="../images/0b331caf72a856549a98cf94d22cf3b3.png" alt="儿童" title="儿童" />
            </a>
            <a href="#5" name="menu_4">
                <img src="../images/78c8a0592d41612c1f01ebe226d8b399.png" alt="聚会" title="聚会" />
            </a>
            <a href="#6" name="menu_5">
                <img src="../images/82e473d51470b7151981ba05c81f5b6d.png" alt="活动专区" title="活动专区" />
            </a>
        </div>
    </div>
    <div class="home-module home-colorful anchor" id="1">
        <h4 class="home-module-title">
            新品
            <span>/</span>
            <span>专区</span>
        </h4>
        <div class="colorful-top-banner">
            <a target="_blank">
                <img class="lazy" src="../images/83db96358514ac6ecade4f142c2c5750.jpg" alt="">
            </a>
        </div>
        <div class="color-product-list">
            <div class="list-box list-box1">
                <ul>
                </ul>
            </div>
        </div>
    </div>

    <div class="home-module home-colorful anchor" id="2">
        <h4 class="home-module-title">
            生日
            <span>/</span>
            <span>专区</span>
        </h4>
        <div class="colorful-top-banner">
            <a target="_blank">
                <img class="lazy" src="../images/84f0375298ea7fe876ae1447c2911400.jpg" alt="">
            </a>
        </div>
        <div class="color-product-list">
            <div class="list-box list-box2">
                <ul>
                </ul>
            </div>
        </div>
    </div>

    <div class="home-module home-colorful anchor" id="4">
        <h4 class="home-module-title">
            儿童
            <span>/</span>
            <span>专区</span>
        </h4>
        <div class="colorful-top-banner">
            <a target="_blank">
                <img class="lazy" src="../images/a85037c288546b3c691192dfad2bb16a.jpg" alt="">
            </a>
        </div>
        <div class="color-product-list">
            <div class="list-box list-box3">
                <ul>
                </ul>
            </div>
        </div>
    </div>

    <div class="home-module home-colorful anchor" id="5">
        <h4 class="home-module-title">
            聚会
            <span>/</span>
            <span>专区</span>
        </h4>
        <div class="colorful-top-banner">
            <a target="_blank">
                <img class="lazy" src="../images/4f5fdcf4d2b26b0400372f90b8fac191.jpg" alt="">
            </a>
        </div>
        <div class="color-product-list">
            <div class="list-box list-box4">
                <ul>
                </ul>
            </div>
        </div>
    </div>

    <div class="home-module home-colorful anchor" id="6">
        <h4 class="home-module-title">
            活动门
            <span>/</span>
            <span>是被吸引了吧</span>
        </h4>
        <ul class="home-s_activity-content">
            <li>
                <a target="_blank">
                    <img class="lazy" src="../images/810af7fb1f079477c8aec960d11fa4df.jpg" alt="新客专享">
                </a>
            </li>
        </ul>
    </div>

    <footer>
        <div class="footer">
            <img class="footer-logo" src="../images/footer-logo.png" height="36" width="96" alt="">
            <div class="footer-nav">
                <a>联系我们</a>
                <span>|</span>
                <a>订购帮助</a>
                <span>|</span>
                <a>企业合作</a>
                <span>|</span>
                <a>生产经营资质</a>
                <span>|</span>
                <a>公告专区</a>
            </div>
            <div class="footer-icon">
                <a href="http://weibo.com/21cake" target="_blank">
                    <img src="../images/footericon-01.png">
                </a>
                <a class="footer-weixin">
                    <div class="footer-erweima footer-weixin-erweima">
                        <img src="../images/erweima.png">
                    </div>
                    <img src="../images/footericon-02.png">
                </a>
                <a class="footer-app">
                    <div class="footer-erweima footer-app-erweima">
                        <img src="../images/footer-erweima.png">
                    </div>
                    APP
                </a>
            </div>

            <div class="footer-text">
                <span>订购专线：400 650 2121（服务时间 08:00–22:00）</span>
                <span>客服电话：021-23099721（全国） | kefu@21cake.com（邮箱）</span>
                <span>杭州/广州：提前5小时预订；北京：提前6小时预订；上海：提前5.5-6小时预订；天津/苏州/无锡/深圳：提前8小时预订（部分偏远地区除外，当日22点以后订单，于次日8点开始审核） </span>
                <span>当日蛋糕配送截止下单时间：北京：16:50；上海：16:30；杭州/广州：13:50；天津：10:30；苏州/无锡/深圳：11:00</span>
                <span>网站注册公司名称: 北京廿一客食品有限公司 地址: 北京市北京经济技术开发区兴海二街5号院3号楼 </span>
            </div>
            <div class="footer-copyright">
                <span>Copyright© 21Cake蛋糕官网商城 2007-2018, 版权所有 <a style="color: #9a9a9a" target="_blank" href="http://www.miitbeian.gov.cn/">京ICP备14006254号-1</a></span>
            </div>
        </div>
    </footer>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/header.js"></script>
<script src="../js/cookie.js"></script>
<script src="../js/login.js"></script>
<script>
    //头部的显隐事件
    header();

    //登录事件
    login();

    //banner跳转事件
    $(".carousel-inner .item").click(function () {
        if ($(this).index() == "0") {
            location.href = "goods-details.html?goods_id=6";
        } else if ($(this).index() == "1") {
            location.href = "goods-details.html?goods_id=rtc1";
        } else if ($(this).index() == "2") {
            location.href = "goods-details.html?goods_id=1";
        } else if ($(this).index() == "3") {
            location.href = "goods-details.html?goods_id=3";
        }
    });
    //商品列表数据绑定
    $.ajax({
        type: "get",
        url: "../php/index_goods_list.php",
        data: {
            goods_type: "new_goods_info"
        },
        dataType: "json",
        success: function (list) {
            let html = "";
            for (var attr in list) {
                let goods_id = list[attr]["goods_id"];
                let goods_name = list[attr]["goods_name"];
                let goods_sket = list[attr]["goods_sket"];
                let goods_price = list[attr]["goods_price"];
                let goods_smallimg = list[attr]["goods_smallimg"];
                let measure = list[attr]["measure"];
                let measure_id = list[attr]["measure_id"];

                html += `
                <li>
                    <a href="goods-details.html?goods_id=${goods_id}" target="_blank">
                        <img class="lazy" src="../images/${goods_smallimg}">
                    </a>
                    <a href="goods-details.html?goods_id=${goods_id}" target="_blank">
                        <h6>${goods_name}</h6>
                    </a>
                    <a href="goods-details.html?goods_id=${goods_id}" target="_blank">
                        <p>${goods_sket}</p>
                    </a>
                    <div class="tag-list">
                        <a target="_blank">新品 &gt;</a>
                    </div>
                    <div class="cart-info">
                        <span class="spec">￥${goods_price}/${measure}</span>
                        <a href="javascript:void(0);" class="add-cart">加入购物车</a>
                    </div>
                    <div class="spec-detail">
                        <div class="spec-title">￥${goods_price}/${measure}</div>
                        <div class="spec-info">
                            <a href="javascript:void(0);" class="active" data-measure="${measure_id}">${measure}
                                <i></i>
                            </a>
                        </div>
                        <div class="buttons">
                            <div class="button left buy-now" onclick="addShoppingCart(this,'${goods_id}')">立即购买</div>
                            <div class="button coffee right add-to-cart" onclick="addShoppingCart(this,'${goods_id}')">加入购物车</div>
                        </div>
                    </div>
                    <div class="addcart-success">
                        <div>
                            <p><i></i>成功添加购物车</p>
                            <a href="cart.html" class="button" target="_blank">查看购物车</a>
                        </div>
                    </div>
                </li>
            `;
            }
            $(".list-box1 ul").html(html);
            //加入购物车事件
            $(document).click(function () {
                $(".spec-detail").hide();
            });
            $(".spec-detail").click(function (e) {
                e.stopPropagation();
            });
            $(".add-cart").click(function (e) {
                e.stopPropagation();
                $(".spec-detail").hide();
                $(this).parent().next().show();
                $(".spec-detail .spec-info i").css("display", "none");
                $(".spec-detail .spec-info .active i").css("display", "block");
                $(".spec-detail .spec-info a").click(function () {
                    $(this).parent().children().removeClass("active");
                    $(this).addClass("active");
                    $(".spec-detail .spec-info .active i").css("display", "block");
                });
            });
        }
    });

    $.ajax({
        type: "get",
        url: "../php/index_goods_list.php",
        data: {
            goods_type: "birthday_goods_info"
        },
        dataType: "json",
        success: function (list) {
            let html = "";
            for (var attr in list) {
                let goods_id = list[attr]["goods_id"];
                let goods_name = list[attr]["goods_name"];
                let goods_sket = list[attr]["goods_sket"];
                let goods_price = list[attr]["goods_price"];
                let goods_smallimg = list[attr]["goods_smallimg"];
                let measure = list[attr]["measure"];
                let measure_id = list[attr]["measure_id"];

                html += `
                <li>
                    <a href="goods-details.html?goods_id=${goods_id}" target="_blank">
                        <img class="lazy" src="../images/${goods_smallimg}">
                    </a>
                    <a href="goods-details.html?goods_id=${goods_id}" target="_blank">
                        <h6>${goods_name}</h6>
                    </a>
                    <a href="goods-details.html?goods_id=${goods_id}" target="_blank">
                        <p>${goods_sket}</p>
                    </a>
                    <div class="tag-list">
                        <a target="_blank">生日 &gt;</a>
                    </div>
                    <div class="cart-info">
                        <span class="spec">￥${goods_price}/${measure}</span>
                        <a href="javascript:void(0);" class="add-cart">加入购物车</a>
                    </div>
                    <div class="spec-detail">
                        <div class="spec-title">￥${goods_price}/${measure}</div>
                        <div class="spec-info">
                            <a href="javascript:void(0);" class="active" data-measure="${measure_id}">${measure}
                                <i></i>
                            </a>
                        </div>
                        <div class="buttons">
                            <div class="button left buy-now" onclick="addShoppingCart(this,'${goods_id}')">立即购买</div>
                            <div class="button coffee right add-to-cart" onclick="addShoppingCart(this,'${goods_id}')">加入购物车</div>
                        </div>
                    </div>
                    <div class="addcart-success">
                        <div>
                            <p><i></i>成功添加购物车</p>
                            <a href="cart.html" class="button" target="_blank">查看购物车</a>
                        </div>
                    </div>
                </li>
            `;
            }
            $(".list-box2 ul").html(html);
            //加入购物车事件
            $(document).click(function () {
                $(".spec-detail").hide();
            });
            $(".spec-detail").click(function (e) {
                e.stopPropagation();
            });
            $(".add-cart").click(function (e) {
                e.stopPropagation();
                $(".spec-detail").hide();
                $(this).parent().next().show();
                $(".spec-detail .spec-info i").css("display", "none");
                $(".spec-detail .spec-info .active i").css("display", "block");
                $(".spec-detail .spec-info a").click(function () {
                    $(this).parent().children().removeClass("active");
                    $(this).addClass("active");
                    $(".spec-detail .spec-info .active i").css("display", "block");
                });
            });
        }
    });

    $.ajax({
        type: "get",
        url: "../php/index_goods_list.php",
        data: {
            goods_type: "children_goods_info"
        },
        dataType: "json",
        success: function (list) {
            let html = "";
            for (var attr in list) {
                let goods_id = list[attr]["goods_id"];
                let goods_name = list[attr]["goods_name"];
                let goods_sket = list[attr]["goods_sket"];
                let goods_price = list[attr]["goods_price"];
                let goods_smallimg = list[attr]["goods_smallimg"];
                let measure = list[attr]["measure"];
                let measure_id = list[attr]["measure_id"];

                html += `
                <li>
                    <a href="goods-details.html?goods_id=${goods_id}" target="_blank">
                        <img class="lazy" src="../images/${goods_smallimg}">
                    </a>
                    <a href="goods-details.html?goods_id=${goods_id}" target="_blank">
                        <h6>${goods_name}</h6>
                    </a>
                    <a href="goods-details.html?goods_id=${goods_id}" target="_blank">
                        <p>${goods_sket}</p>
                    </a>
                    <div class="tag-list">
                        <a target="_blank">儿童 &gt;</a>
                    </div>
                    <div class="cart-info">
                        <span class="spec">￥${goods_price}/${measure}</span>
                        <a href="javascript:void(0);" class="add-cart">加入购物车</a>
                    </div>
                    <div class="spec-detail">
                        <div class="spec-title">￥${goods_price}/${measure}</div>
                        <div class="spec-info">
                            <a href="javascript:void(0);" class="active" data-measure="${measure_id}">${measure}
                                <i></i>
                            </a>
                        </div>
                        <div class="buttons">
                            <div class="button left buy-now" onclick="addShoppingCart(this,'${goods_id}')">立即购买</div>
                            <div class="button coffee right add-to-cart" onclick="addShoppingCart(this,'${goods_id}')">加入购物车</div>
                        </div>
                    </div>
                    <div class="addcart-success">
                        <div>
                            <p><i></i>成功添加购物车</p>
                            <a href="cart.html" class="button" target="_blank">查看购物车</a>
                        </div>
                    </div>
                </li>
            `;
            }
            $(".list-box3 ul").html(html);
            //加入购物车事件
            $(document).click(function () {
                $(".spec-detail").hide();
            });
            $(".spec-detail").click(function (e) {
                e.stopPropagation();
            });
            $(".add-cart").click(function (e) {
                e.stopPropagation();
                $(".spec-detail").hide();
                $(this).parent().next().show();
                $(".spec-detail .spec-info i").css("display", "none");
                $(".spec-detail .spec-info .active i").css("display", "block");
                $(".spec-detail .spec-info a").click(function () {
                    $(this).parent().children().removeClass("active");
                    $(this).addClass("active");
                    $(".spec-detail .spec-info .active i").css("display", "block");
                });
            });
        }
    });

    $.ajax({
        type: "get",
        url: "../php/index_goods_list.php",
        data: {
            goods_type: "party_goods_info"
        },
        dataType: "json",
        success: function (list) {
            let html = "";
            for (var attr in list) {
                let goods_id = list[attr]["goods_id"];
                let goods_name = list[attr]["goods_name"];
                let goods_sket = list[attr]["goods_sket"];
                let goods_price = list[attr]["goods_price"];
                let goods_smallimg = list[attr]["goods_smallimg"];
                let measure = list[attr]["measure"];
                let measure_id = list[attr]["measure_id"];

                html += `
                <li>
                    <a href="goods-details.html?goods_id=${goods_id}" target="_blank">
                        <img class="lazy" src="../images/${goods_smallimg}">
                    </a>
                    <a href="goods-details.html?goods_id=${goods_id}" target="_blank">
                        <h6>${goods_name}</h6>
                    </a>
                    <a href="goods-details.html?goods_id=${goods_id}" target="_blank">
                        <p>${goods_sket}</p>
                    </a>
                    <div class="tag-list">
                        <a target="_blank">聚会 &gt;</a>
                    </div>
                    <div class="cart-info">
                        <span class="spec">￥${goods_price}/${measure}</span>
                        <a href="javascript:void(0);" class="add-cart">加入购物车</a>
                    </div>
                    <div class="spec-detail">
                        <div class="spec-title">￥${goods_price}/${measure}</div>
                        <div class="spec-info">
                            <a href="javascript:void(0);" class="active" data-measure="${measure_id}">${measure}
                                <i></i>
                            </a>
                        </div>
                        <div class="buttons">
                            <div class="button left buy-now" onclick="addShoppingCart(this,'${goods_id}')">立即购买</div>
                            <div class="button coffee right add-to-cart" onclick="addShoppingCart(this,'${goods_id}')">加入购物车</div>
                        </div>
                    </div>
                    <div class="addcart-success">
                        <div>
                            <p><i></i>成功添加购物车</p>
                            <a href="cart.html" class="button" target="_blank">查看购物车</a>
                        </div>
                    </div>
                </li>
            `;
            }
            $(".list-box4 ul").html(html);
            //加入购物车事件
            $(document).click(function () {
                $(".spec-detail").hide();
            });
            $(".spec-detail").click(function (e) {
                e.stopPropagation();
            });
            $(".add-cart").click(function (e) {
                e.stopPropagation();
                $(".spec-detail").hide();
                $(this).parent().next().show();
                $(".spec-detail .spec-info i").css("display", "none");
                $(".spec-detail .spec-info .active i").css("display", "block");
                $(".spec-detail .spec-info a").click(function () {
                    $(this).parent().children().removeClass("active");
                    $(this).addClass("active");
                    $(".spec-detail .spec-info .active i").css("display", "block");
                });
            });
        }
    });

    //加入购物车
    function addShoppingCart(object, id) {
        if (getCookie("t_cake_userId")) {
            let goodsnum = 1;
            $.ajax({
                type: "get",
                url: "../php/addcart.php",
                data: {
                    userid: getCookie("t_cake_userId"),
                    goodsid: id,
                    measure_id: $(object).parent().prev().children().filter(".active").attr("data-measure"),
                    birthday_card: "选择生日牌",
                    goodsnum: goodsnum
                },
                dataType: "json",
                success: function (obj) {
                    $(object).parent().parent().hide();
                    if ($(object).hasClass("buy-now")) {
                        location.href = "cart.html";
                    }
                    $(object).parent().parent().next().show(function () {
                        setTimeout(() => {
                            $(".addcart-success").hide();
                        }, 3000);
                    });
                }
            });
        } else {
            setCookie("historyURL",location.href,7);
            location.href = "login.html";
        }
    }

</script>

</html>